<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <ve-tabs :actived="activedKey" :list="tabs" @change="tabsChange" class="info-tabs"></ve-tabs>
      </template>
    </FilterNavbar>
    <view class="opera-read" @click="opreaRead" :style="'top:' + (barHeight * 2 + 20) + 'rpx'">
      <image src="../../static/icons/icon-read.png" />
      <p>全部已读</p>
    </view>

    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="refreshList"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <view class="info-header" v-if="isShowTip && isPermissionShow">
          <view class="title">开启推送消息：</view>
          <image @click="closeTip" class="info-close" src="../../static/icons/icon-close.png" />
          <view class="content">
            <p class="tip">防止错过订单提醒、预警提醒、账单提醒。</p>
            <view class="btn" @click="toInfo">打开推送消息</view>
          </view>
        </view>
        <InfoItem :activedKey="activedKey" v-for="record in dataSource" :record="record" :key="record.id" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import FilterNavbar from '@/components/FilterNavbar'
  import { onShow, onLoad } from '@dcloudio/uni-app'
  import { ref, onMounted, computed } from 'vue'
  import useList from '@/hooks/useList'
  import InfoItem from './components/infoItem.vue'
  import { usePermission } from '@/hooks/usePermission'
  import { readAllNotice, getUnreadList } from '@/api/info/index'
  import permision from '@/utils/permission/index'
  import toPermision from '@/utils/permission/permission'

  const tabs = ref([
    { label: '通知', num: 0, index: 1 },
    { label: '消息', num: 0, index: 2 },
  ])

  const queryParam = ref({
    noticeType: 1,
  })

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/notice/userList',
    queryParam,
  )

  // 推送消息提示
  const isShowTip = ref(true)
  const closeTip = () => {
    isShowTip.value = false
  }

  const activedKey = ref(0)
  const tabsChange = (e) => {
    activedKey.value = e
    dataSource.value = []
    switch (e) {
      case 0:
        queryParam.value.noticeType = 1
        resetRefresh()
        break
      case 1:
        queryParam.value.noticeType = 2
        resetRefresh()
        break
    }
  }
  // 下拉刷新
  const refreshList = () => {
    resetRefresh(true)
    getTabsData()
  }
  // 全部已读操作
  const opreaRead = () => {
    readAllNotice().then(() => {
      dataSource.value = []
      resetRefresh()
      getTabsData()
    })
  }
  const getTabsData = () => {
    getUnreadList().then((res) => {
      tabs.value.forEach((item) => {
        item.num = res.result[`type${item.index}`] || 0
      })
    })
  }

  const isPermissionShow = ref(true)
  // 根据推送权限判断推送消息tip是否展示
  const getInfoShow = () => {
    const system = uni.getSystemInfoSync()
    // if (system.osName == 'android') {
    //   permision.requestAndroidPermission('android.permission.RECEIVE_WAP_PUSH').then((res) => {
    //     isPermissionShow.value = res == 1 ? false : true
    //   })
    // }
    if (plus.os.name == 'Android') {
      setPermissions()
    }
    if (system.osName == 'ios') {
      const iosPermission = permision.judgeIosPermission('push')
      isPermissionShow.value = iosPermission ? false : true
    }
  }
  const setPermissions = () => {
    var main = plus.android.runtimeMainActivity()
    var NotificationManagerCompat = plus.android.importClass('android.support.v4.app.NotificationManagerCompat')
    //android.support.v4升级为androidx
    if (NotificationManagerCompat == null) {
      NotificationManagerCompat = plus.android.importClass('androidx.core.app.NotificationManagerCompat')
    }
    var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled()
    // 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置
    isPermissionShow.value = areNotificationsEnabled ? false : true
  }
  const toInfo = () => {
    toPermision.gotoAppPermissionSetting()
  }
  const barHeight = ref(0)
  onShow(() => {
    // 获取滑动高度
    uni.getSystemInfo({
      success: function (res) {
        barHeight.value = res.statusBarHeight
      },
    })
    getInfoShow()
    resetRefresh()
    getTabsData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .container-content {
    padding: 24rpx;
  }
  .opera-read {
    position: absolute;
    right: 24rpx;
    // top: 90rpx;
    display: flex;
    align-items: center;
    z-index: 999;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }
    color: #165dff;
    font-size: 28rpx;
    line-height: 44rpx;
  }

  .record-list {
    padding: 24rpx;
  }
  .info-header {
    height: 120rpx;
    background: #fff2d9;
    border-radius: 8rpx;
    opacity: 1;
    position: relative;
    padding: 24rpx;
    margin-bottom: 24rpx;
    .info-close {
      width: 28rpx;
      height: 28rpx;
      position: absolute;
      top: 12rpx;
      right: 12rpx;
    }
    .title {
      color: #834d06;
      line-height: 36rpx;
      font-size: 24rpx;
      font-weight: 600;
    }
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tip {
        font-size: 24rpx;
        color: #834d06;
      }
      .btn {
        width: 176rpx;
        height: 40rpx;
        background: #f9654e;
        border-radius: 40rpx;
        color: #ffffff;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
